<template>
    <view class="">
        <!-- v-if="amtions == false && juamtions == false" -->
        <view class="page">
            <view class="fanhui_box">
                <view class="pic_bxo" @click="goBack">
                    <u-icon name="arrow-left" color="#fff" size="40"></u-icon>
                </view>
            </view>
            <view class="opening_box">
                <image src="https://mh.qingfentool.vip/upload/image/20230520/49b20455ca5a334cd6794726e030cf78.png"
                    mode="scaleToFill" />
            </view>
            <!-- 奖品 -->
            <template>
                <!-- 总盒子 -->
                <view class="one_pic" :class="'len_' + cardWardData.length">
                    <view v-for="(item, i) in cardWardData" :key="i" class="big_box">
                        <view class="one_box">
                            <view class="card__content"
                                :style="isStartChangeCard == true ? 'transform: rotateY(1260deg)' : 'transform: rotateY(180deg)'">
                                <view class="card__front">
                                    <image style="width: 100%;height: 100%;" v-if="!duihaunShow"
                                        src="https://new.qingfentool.vip/upload/image/20230704/08fef53c85ad3f0f1d926deea686e3b1.png">
                                    </image>
                                </view>

                                <view class="card__back" v-if="duihaunShow"
                                    :style="{ backgroundImage: 'url(' + item.bg + ')', backgroundSize: '100% 100%' }">
                                    <view class="pic_box">
                                        <image :src="item.prize_icon" mode="scaleToFill" />
                                    </view>
                                    <!-- <view class="fashu_box">X{{ item.multiple }}</view> -->
                                </view>
                                <view class="card__back" v-if="!duihaunShow"
                                    style="background-image: url('https://new.qingfentool.vip/upload/image/20230704/08fef53c85ad3f0f1d926deea686e3b1.png');background-size: 100% 100%;">
                                </view>
                            </view>
                        </view>
                        <view class="up_name_box" v-if="duihaunShow">{{ item.prize_name }}</view>
                        <view class="duihuan_box" v-if="duihaunShow">
                            大王币{{ item.recovery_price }}
                        </view>
                        <!-- <view class="duihuan_box" v-if="duihaunShow && boxType == 2">
                            大王币{{ item.recovery_price }}
                        </view>
                        <view class="duihuan_box"  v-if="duihaunShow && boxType == 1">
                            大王币{{ (item.recovery_price * item.multiple).toFixed(2) }}
                        </view> -->
                    </view>
                </view>
            </template>
            <!-- 底部按钮 -->
            <view class="floot_box" v-if="duihaunShow">
                <image src="https://new.qingfentool.vip/upload/image/20230729/f8e8749fd1add28780687775195fa497.png"
                    mode="scaleToFill" />
            </view>
        </view>
        <!-- <view class="antions" v-show="amtions == true">
            <l-svga ref="svga"></l-svga>
        </view>
        <view class="antions1" v-show="juamtions == true">
            <l-svga ref="svga1"></l-svga>
        </view> -->
    </view>
</template>
<script>
export default {
    data() {
        return {
            order_id: '', //商品编号
            prizeList: 1,
            idIndex: 0,
            dataLen: 0,
            innerAudioContext: null,
            innerAndiu: null,
            duihuanadiuo: null,
            cardWardData: [],
            amtions: false, //是否大王
            juamtions: false, //是否将军
            isFZ: true, //是否反转
            duihaunShow: false, //显示兑换
            boxType: '', //盲盒类型1：倍赏
            recPrice: '', //兑换总价
            multiple: 1, //倍数
            dhStatus: 1, //全部兑换状态
            disabledBtn: true, //全部兑换禁用
            tenOpen: '',//十连抽
            payType: '',//几连抽
            isStartChangeCard: false,
            demList: [
                {
                    bg: "https://new.qingfentool.vip/upload/image/20230701/8fb14c3e94324526b0d228a5af9110ff.png",
                    recovery_price: "120.00",
                    prize_icon: "https://new.qingfentool.vip/upload/image/20230715/72020583ca625f905eb0dce20a0df2bc.png",
                    prize_name: "CHANEL 香奈儿 蔚蓝男士blue木质香15ml体验装"
                },
                {
                    bg: "https://new.qingfentool.vip/upload/image/20230703/1e4192bce1a78e1ff0ff1eeb64cecd5b.gif",
                    recovery_price: "3860.00",
                    prize_icon: "https://new.qingfentool.vip/upload/image/20230805/a0b0ac24e084f898a236d6c00d9876c4.png",
                    prize_name: "CIGA Design玺佳X系列大猩猩SUV手表镂空方形黑客金机械男表七夕礼物送男友"
                },
                {
                    bg: "https://new.qingfentool.vip/upload/image/20230703/1e4192bce1a78e1ff0ff1eeb64cecd5b.gif",
                    recovery_price: "5999.00",
                    prize_icon: "https://new.qingfentool.vip/upload/image/20230914/59f53b269c2c8b59b0e2426239dea8dc.png",
                    prize_name: "Apple/苹果Iphone 15  128G 粉色 支持移动联通 电信5G双卡双待手机 颜色随机 提过后预计45日发货"
                },
                {
                    bg: "https://new.qingfentool.vip/upload/image/20230703/1e4192bce1a78e1ff0ff1eeb64cecd5b.gif",
                    recovery_price: "3599.00",
                    prize_icon: "https://new.qingfentool.vip/upload/image/20230607/700d19b7be570559e3d7f6f4ae99664f.png",
                    prize_name: "【新品】Garmin佳明Instinct本能2X太阳能户外运动手表登山跑步 烈焰红"
                },
                {
                    bg: "https://new.qingfentool.vip/upload/image/20230703/1e4192bce1a78e1ff0ff1eeb64cecd5b.gif",
                    recovery_price: "1899.00",
                    prize_icon: "https://new.qingfentool.vip/upload/image/20230606/8f8e64013e5af91d7939ee346dae2bd7.png",
                    prize_name: "Apple/苹果 AirPods Pro (第二代) 白色"
                },
                {
                    bg: "https://new.qingfentool.vip/upload/image/20230703/fc534258a171c9ee9300c0056d1902ee.gif",
                    recovery_price: "7999.00",
                    prize_icon: "https://mh.qingfentool.vip/upload/image/20230110/f1fc3e3048b858f4f2603f896048a0dd.png",
                    prize_name: "Apple/苹果IPHONE14pro 128G"
                },
                {
                    bg: "https://new.qingfentool.vip/upload/image/20230703/fc534258a171c9ee9300c0056d1902ee.gif",
                    recovery_price: "5330.00",
                    prize_icon: "https://new.qingfentool.vip/upload/image/20230606/eb3b2510523bed211dba6917172b7193.png",
                    prize_name: "HR赫莲娜黑绷带晚霜舒缓面霜精萃露小露珠水套组小露珠200ml+黑绷带50ml"
                },
                {
                    bg: "https://new.qingfentool.vip/upload/image/20230703/1e4192bce1a78e1ff0ff1eeb64cecd5b.gif",
                    recovery_price: "4699.00",
                    prize_icon: "https://new.qingfentool.vip/upload/image/20230620/1083d34380cd059b340b2700e8f30b97.png",
                    prize_name: "Apple/苹果 iPhone 13mini 128G 绿色"
                },
                {
                    bg: "https://new.qingfentool.vip/upload/image/20230703/1e4192bce1a78e1ff0ff1eeb64cecd5b.gif",
                    recovery_price: "800.00",
                    prize_icon: "https://new.qingfentool.vip/upload/image/20230731/a00a62e176101400b9a154de7b77efb4.png",
                    prize_name: "ALIENWARE外星人AW510H＆AW520H头戴式电脑有线吃鸡游戏降噪耳机"
                },
                {
                    bg: "https://new.qingfentool.vip/upload/image/20230703/1e4192bce1a78e1ff0ff1eeb64cecd5b.gif",
                    recovery_price: "1600.00",
                    prize_icon: "https://new.qingfentool.vip/upload/image/20230703/1a3e79f93dcb859e0998bccd06ecf663.png",
                    prize_name: "【2023新品】中柏16英寸笔记本电脑轻薄便携学生全新款商务办公游戏本官方旗舰店正品大学生手提电脑上网本"
                },
                {
                    bg: "https://new.qingfentool.vip/upload/image/20230703/1e4192bce1a78e1ff0ff1eeb64cecd5b.gif",
                    recovery_price: "1200.00",
                    prize_icon: "https://new.qingfentool.vip/upload/image/20230714/4393ad4d6c07efaa15616707946ab5b4.png",
                    prize_name: "Nike Dunk HigjQS Banshee 报丧女妖 高达联名 38码"
                },
                {
                    bg: "https://new.qingfentool.vip/upload/image/20230703/fc534258a171c9ee9300c0056d1902ee.gif",
                    recovery_price: "999.00",
                    prize_icon: "https://new.qingfentool.vip/upload/image/20230716/298cf75281fe2aea537341f77fce8334.png",
                    prize_name: "casio旗舰店GA-2100八角八王子潮流运动手表男女卡西欧 G-SHOCK"
                },
                {
                    bg: "https://new.qingfentool.vip/upload/image/20230703/1e4192bce1a78e1ff0ff1eeb64cecd5b.gif",
                    recovery_price: "358.00",
                    prize_icon: "https://new.qingfentool.vip/upload/image/20230607/7f61375d80081ccaed88c457d64010b1.png",
                    prize_name: "【APP智能穿戴】2023新款挂脖风扇制冷智能半导体小空调便携穿戴式迷你随身小型usb风扇充电静音户外降温挂脖子"
                },
                {
                    bg: "https://new.qingfentool.vip/upload/image/20230701/195c3ccf84e8b703266fe63b77537e79.png",
                    recovery_price: "129.00",
                    prize_icon: "https://mh.qingfentool.vip/upload/image/20221226/e31a2c8da2e9db0a23a32d9990814d9b.png",
                    prize_name: "万代BANDAI 假面骑士 FRS拼装模型Figure-rise卌骑 火箭头 基础形态"
                },
                {
                    bg: "https://new.qingfentool.vip/upload/image/20230703/1e4192bce1a78e1ff0ff1eeb64cecd5b.gif",
                    recovery_price: "21.00",
                    prize_icon: "https://new.qingfentool.vip/upload/image/20230605/ce2cdaff52fd25e70479733d33bd5edd.png",
                    prize_name: "印尼进口丽芝士威化饼干奶酪味玉米棒随心搭纳宝帝nabati休闲零食"
                }
            ],//试玩
            newObj:{},
        }
    },
    mounted() {
        // // #ifdef APP-PLUS
        // this.antions()
        // this.jiangjunantions()
        // // #endif
    },
    onLoad(e) {
        // let payMode = 1
        // if (e.lotto == 1) {
        //     payMode = 1
        // } else if (e.lotto == 2) {
        //     payMode = 3
        // } else if (e.lotto == 3) {
        //     payMode = 5
        // } else if (e.lotto == 4) {
        //     payMode = 10
        // }
        // for (let i = 0; i < payMode; i++) {
        //     this.cardWardData.push({
        //         "isStartChangeCard": true
        //     })
        // }
    },
    onShow() {
        this.playlist()
        this.innerAudioContext = uni.createInnerAudioContext()
        this.innerAndiu = uni.createInnerAudioContext()
        this.duihuanadiuo = uni.createInnerAudioContext()
    },
    beforeDestroy() {
        this.innerAudioContext.destroy()
        this.innerAndiu.destroy()
        this.duihuanadiuo.destroy()
    },
    methods: {
        // 返回
        goBack() {
            uni.navigateBack()
        },
        // antions() {
        //     this.$refs.svga.render(async (parser, player) => {
        //         const videoItem = await parser.load("https://new.qingfentool.vip/app/animation_3.svga");
        //         await player.setVideoItem(videoItem);
        //         // 设置当前动画的循环次数，0代表无限循环 默认 0
        //         player.loops = 1
        //         // 设置动画缩放模式，可选值为 Fill / AspectFill / AspectFit
        //         player.setContentMode('AspectFill')
        //         // 开始播放动画，reverse = true 时则反向播放。
        //         player.startAnimation()
        //         // 监听动画进度
        //         player.onFinished(() => {
        //             this.amtions = false
        //         })
        //     })
        // },
        // jiangjunantions() {
        //     this.$refs.svga1.render(async (parser, player) => {
        //         const videoItem = await parser.load("https://new.qingfentool.vip/app/animation_2.svga");
        //         await player.setVideoItem(videoItem);
        //         // 设置当前动画的循环次数，0代表无限循环 默认 0
        //         player.loops = 1
        //         // 设置动画缩放模式，可选值为 Fill / AspectFill / AspectFit
        //         player.setContentMode('AspectFill')
        //         // 开始播放动画，reverse = true 时则反向播放。
        //         player.startAnimation()
        //         // 监听动画进度
        //         player.onFinished(() => {
        //             this.juamtions = false
        //         })
        //     })
        // },
        //结果数据
        playlist() {

            let _ = require('lodash');
            this.cardWardData = [_.sample(this.demList)]
            setTimeout(() => {
                this.isStartChangeCard = true
                if ((this.innerAudioContext || this.innerAndiu) && this.isFZ) {
                    this.isFZ = false
                    this.rotateCards()
                }
            }, 1000)
        },
        rotateCards() {
            // var dwLevel = false
            // var juLevel = false
            // var qtLevel = false
            // var arr = []
            this.cardWardData.forEach((item) => {

                // arr.push(item.level)

            })
            this.playVoice(
                'https://new.qingfentool.vip/upload/mch/videos/20230609/3a70446c6d8f72c378accf0d0f36ab6a.mp3',
                this.innerAudioContext)
            this.innerAudioContext.onEnded((res) => {
                this.duihaunShow = true
            })
            // if (arr.includes(3)) {
            //     dwLevel = true
            // } else if (arr.includes(2)) {
            //     juLevel = true
            // } else {
            //     qtLevel = true
            // }
            // if (dwLevel) {
            //     this.playVoice(
            //         'https://new.qingfentool.vip/upload/mch/videos/20230609/3a70446c6d8f72c378accf0d0f36ab6a.mp3',
            //         this.innerAudioContext)
            //     this.innerAudioContext.onEnded((res) => {
            //         // #ifdef APP-PLUS
            //         this.antions()
            //         this.playVoice1(
            //             'https://new.qingfentool.vip/upload/mch/videos/20230704/fd88e8c42b2d6ddbc2a6bc60717b8a28.mp3',
            //             this.innerAndiu)
            //         // #endif

            //         this.duihaunShow = true
            //         // #ifdef APP-PLUS
            //         this.amtions = true
            //         // #endif
            //     })
            // } else if (juLevel) {
            //     this.playVoice(
            //         'https://new.qingfentool.vip/upload/mch/videos/20230609/3a70446c6d8f72c378accf0d0f36ab6a.mp3',
            //         this.innerAudioContext)
            //     this.innerAudioContext.onEnded((res) => {
            //         // #ifdef APP-PLUS
            //         this.jiangjunantions()
            //         this.playVoice1(
            //             'https://new.qingfentool.vip/upload/mch/videos/20230704/909134b12a4de59eba5357c89ce150ea.mp3',
            //             this.innerAndiu)
            //         // #endif
            //         this.duihaunShow = true
            //         // #ifdef APP-PLUS 
            //         this.juamtions = true
            //         // #endif
            //     })
            // } else if (qtLevel) {
            //     this.playVoice(
            //         'https://new.qingfentool.vip/upload/mch/videos/20230609/3a70446c6d8f72c378accf0d0f36ab6a.mp3',
            //         this.innerAudioContext)
            //     this.innerAudioContext.onEnded((res) => {
            //         this.duihaunShow = true
            //     })
            // } else {
            //     return
            // }
        },
        drawBoxEnd_fa() {
            //翻牌结束
        },
        playVoice(url, innerAudioContext) { // url即为音频路径
            ////console.log('播放', url);
            if (url) {
                // 判断路径是否已经被赋值，以及音频播放状态 !innerAudioContext.paused为正在播放
                if (this.lastRecord == url && !innerAudioContext.paused) {
                    innerAudioContext.stop(); // 停止
                    return;
                }
                this.lastRecord = url; // 将路径赋值给定义的变量好做判断
                innerAudioContext.src = url; // 配置音频播放路径
                innerAudioContext.play(); // 播放
                innerAudioContext.loop = false // 是否循环播放
                this.innerAudioContext.volume = (0.09)

            }
        },
        playVoice1(url, innerAndiu) { // url即为音频路径
            ////console.log('播放', url);
            if (url) {
                // 判断路径是否已经被赋值，以及音频播放状态 !innerAudioContext.paused为正在播放
                if (this.lastRecord == url && !innerAndiu.paused) {
                    innerAndiu.stop(); // 停止
                    return;
                }
                this.lastRecord = url; // 将路径赋值给定义的变量好做判断
                innerAndiu.src = url; // 配置音频播放路径
                innerAndiu.play(); // 播放
                innerAndiu.loop = false // 是否循环播放
                this.innerAndiu.volume = (0.2)

            }
        },
        duihuanplayVoice(url, duihuanadiuo) { // url即为音频路径
            if (url) {
                // 判断路径是否已经被赋值，以及音频播放状态 !innerAudioContext.paused为正在播放
                if (this.lastRecord == url && !duihuanadiuo.paused) {
                    duihuanadiuo.stop(); // 停止
                    return;
                }
                this.lastRecord = url; // 将路径赋值给定义的变量好做判断
                duihuanadiuo.src = url; // 配置音频播放路径
                duihuanadiuo.play(); // 播放
                duihuanadiuo.loop = false // 是否循环播放
                this.duihuanadiuo.volume = (0.09)
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.antions {
    width: 100vw;
    height: 100vh;
    background-image: url('https://new.qingfentool.vip/upload/image/20230704/056077ebdeb221abd6d4ece240721eb5.png');
    background-size: 100% 100%;
    overflow: hidden;
}

.antions1 {
    width: 100vw;
    height: 100vh;
    background-image: url('https://new.qingfentool.vip/upload/image/20230704/056077ebdeb221abd6d4ece240721eb5.png');
    background-size: 100% 100%;
    overflow: hidden;
}

.page {
    background-image: url('https://new.qingfentool.vip/upload/image/20230704/056077ebdeb221abd6d4ece240721eb5.png');
    background-size: 100% 100%;
    width: 100vw;
    min-height: 100vh;

    // 返回
    .fanhui_box {
        width: 100%;
        height: 160rpx;
        position: relative;
        margin: 0 0 30rpx 0;

        .pic_bxo {
            width: 50rpx;
            height: 50rpx;
            position: absolute;
            bottom: 10rpx;
            left: 10rpx;
        }
    }

    // 恭喜已开出
    .opening_box {
        width: 100%;
        height: 142rpx;
        margin: auto;
        margin-bottom: 30rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    // 开奖区总大小
    .one_pic {
        width: 100%;
        height: 800rpx;
        // background-color: aqua;
        margin: auto;
        margin-bottom: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        margin-bottom: 60rpx;

        .big_box {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            // background-color: #fff;

            .duihuan_box {
                width: 98%;
                height: 54rpx;
                border-radius: 60rpx;
                // border: 1rpx solid #FF9F00;
                // box-shadow: inset 0rpx 0rpx 20rpx 0rpx rgba(255, 159, 0, 0.4);
                color: #FF9900;
                text-align: center;
                line-height: 54rpx;
                font-size: 24rpx;
                z-index: 10;
                margin: auto;
            }


            .up_name_box {
                width: 224rpx;
                height: 60rpx;
                text-align: center;
                color: #fff;
                line-height: 60rpx;
                font-size: 24rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }


        // 一个
        .one_box {
            width: 400rpx;
            height: 550rpx;


            .linghtType1 {
                // box-shadow: 0upx 0upx 26upx 4upx #fff;
            }

            .linghtType2 {
                // box-shadow: 0upx 0upx 26upx 4upx #FFC03E;
            }

            .linghtType3 {
                // box-shadow: 0upx 0upx 26upx 4upx #EF623D;
            }

            .card__content {
                position: relative;
                width: 100%;
                height: 100%;
                text-align: center;
                transition: all 4s;
                transform-style: preserve-3d;
                border-radius: 20upx;
            }

            .card__front,
            .card__back {
                position: absolute;
                width: 100%;
                height: 100%;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
                display: flex;
                justify-content: center;
                color: white;
                border-radius: 20upx;
            }

            .card__back {
                transform: rotateY(180deg);
                // background-image: url('https://mh.qingfentool.vip/upload/image/20230520/23ca2b2614004d1dab937e4a591c8445.png');
                // background-size: 100% 100%;
                position: relative;

                .pic_box {
                    width: 310rpx;
                    height: 300rpx;
                    // background-color: #fff;
                    position: absolute;
                    top: 100rpx;

                    image {
                        width: 100%;
                        height: 100%;
                    }
                }

                .name_box {
                    width: 70%;
                    height: 64rpx;
                    position: absolute;
                    bottom: 130rpx;
                    text-align: center;
                    font-size: 28rpx;
                    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                    font-weight: 500;
                    color: #FFFFFF;
                    line-height: 64rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .fashu_box {
                    width: 60rpx;
                    height: 60rpx;
                    position: absolute;
                    font-weight: 600;
                    bottom: 60rpx;
                    font-size: 30rpx;
                    color: #FF9900;
                }


            }

            .label {
                display: flex;
                align-items: center;
                margin-top: 6upx;

                .numCla {
                    background: rgba(125, 125, 121, 0.3);
                    padding: 3upx 15upx;
                    position: relative;
                    left: -5px;
                    z-index: 1;
                    color: rgba(250, 225, 174, 1);
                    border-radius: 5upx;
                    font-size: 20upx;
                }
            }

            .detailBox {
                position: absolute;
                z-index: 111;
                top: 73%;
                font-size: 30upx;
            }
        }

        &.len_2 {

            width: 70%;
            justify-content: space-around;
            align-items: center;

            .big_box {
                // background-color: #fff;
            }

            .one_box {
                width: 200rpx;
                height: 274rpx;

                .card__front,
                .card__back {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    -webkit-backface-visibility: hidden;
                    backface-visibility: hidden;
                    display: flex;
                    justify-content: center;
                    color: white;
                    border-radius: 20upx;
                }

                .card__back {
                    transform: rotateY(180deg);
                    // background-image: url('https://mh.qingfentool.vip/upload/image/20230520/23ca2b2614004d1dab937e4a591c8445.png');
                    // background-size: 100% 100%;
                    position: relative;

                    .pic_box {
                        width: 180rpx;
                        height: 210rpx;
                        position: absolute;
                        top: 25rpx;

                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .name_box {
                        width: 70%;
                        height: 64rpx;
                        position: absolute;
                        bottom: 74rpx;
                        text-align: center;
                        font-size: 28rpx;
                        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                        font-weight: 500;
                        color: #FFFFFF;
                        line-height: 64rpx;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .fashu_box {
                        // width: 38rpx;
                        height: 30rpx;
                        position: absolute;
                        font-weight: 600;
                        bottom: 30rpx;
                        font-size: 28rpx;
                        color: #FF9900;
                    }


                }
            }
        }

        &.len_3 {

            width: 80%;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;

            .big_box {
                width: 50%;
                display: flex;
                justify-content: center;
                // background-color: #fff;

                .one_box {
                    width: 200rpx;
                    height: 274rpx;

                    .card__front,
                    .card__back {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                        display: flex;
                        justify-content: center;
                        color: white;
                        border-radius: 20upx;
                    }

                    .card__back {
                        transform: rotateY(180deg);
                        // background-image: url('https://mh.qingfentool.vip/upload/image/20230520/23ca2b2614004d1dab937e4a591c8445.png');
                        // background-size: 100% 100%;
                        position: relative;

                        .pic_box {
                            width: 180rpx;
                            height: 210rpx;
                            position: absolute;
                            top: 25rpx;

                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .name_box {
                            width: 70%;
                            height: 64rpx;
                            position: absolute;
                            bottom: 74rpx;
                            text-align: center;
                            font-size: 28rpx;
                            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                            font-weight: 500;
                            color: #FFFFFF;
                            line-height: 64rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .fashu_box {

                            // width: 38rpx;
                            height: 30rpx;
                            position: absolute;
                            font-weight: 600;
                            bottom: 30rpx;
                            font-size: 28rpx;
                            color: #FF9900;
                        }


                    }
                }
            }

            .big_box:nth-child(1) {
                width: 100%;
                display: flex;
                justify-content: center;

                .duihuan_box {
                    width: 40%;
                }

                .one_box {
                    width: 200rpx;
                    height: 274rpx;

                    .card__front,
                    .card__back {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                        display: flex;
                        justify-content: center;
                        color: white;
                        border-radius: 20upx;
                    }

                    .card__back {
                        transform: rotateY(180deg);
                        position: relative;

                        .pic_box {
                            width: 180rpx;
                            height: 210rpx;
                            position: absolute;
                            top: 25rpx;

                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .name_box {
                            width: 70%;
                            height: 64rpx;
                            position: absolute;
                            bottom: 74rpx;
                            text-align: center;
                            font-size: 28rpx;
                            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                            font-weight: 500;
                            color: #FFFFFF;
                            line-height: 64rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .fashu_box {

                            // width: 38rpx;
                            height: 30rpx;
                            position: absolute;
                            font-weight: 600;
                            bottom: 30rpx;
                            font-size: 28rpx;
                            color: #FF9900;
                        }


                    }
                }
            }


        }

        &.len_4 {

            width: 70%;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;

            .big_box {
                // background-color: #fff;


                .one_box {
                    width: 200rpx;
                    height: 274rpx;

                    .card__front,
                    .card__back {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                        display: flex;
                        justify-content: center;
                        color: white;
                        border-radius: 20upx;
                    }

                    .card__back {
                        transform: rotateY(180deg);
                        // background-image: url('https://mh.qingfentool.vip/upload/image/20230520/23ca2b2614004d1dab937e4a591c8445.png');
                        // background-size: 100% 100%;
                        position: relative;

                        .pic_box {
                            width: 180rpx;
                            height: 210rpx;
                            position: absolute;
                            top: 25rpx;

                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .name_box {
                            width: 70%;
                            height: 64rpx;
                            position: absolute;
                            bottom: 74rpx;
                            text-align: center;
                            font-size: 28rpx;
                            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                            font-weight: 500;
                            color: #FFFFFF;
                            line-height: 64rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .fashu_box {
                            // width: 38rpx;
                            height: 30rpx;
                            position: absolute;
                            font-weight: 600;
                            bottom: 30rpx;
                            font-size: 28rpx;
                            color: #FF9900;
                        }


                    }
                }
            }
        }

        &.len_5 {
            width: 97%;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;



            .big_box {
                width: 30%;
                display: flex;
                justify-content: center;

                .one_box {
                    width: 200rpx;
                    height: 274rpx;

                    .card__front,
                    .card__back {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                        display: flex;
                        justify-content: center;
                        color: white;
                        border-radius: 20upx;
                    }

                    .card__back {
                        transform: rotateY(180deg);
                        // background-image: url('https://mh.qingfentool.vip/upload/image/20230520/23ca2b2614004d1dab937e4a591c8445.png');
                        // background-size: 100% 100%;
                        position: relative;

                        .pic_box {
                            width: 180rpx;
                            height: 210rpx;
                            position: absolute;
                            top: 25rpx;

                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .name_box {
                            width: 70%;
                            height: 64rpx;
                            position: absolute;
                            bottom: 74rpx;
                            text-align: center;
                            font-size: 28rpx;
                            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                            font-weight: 500;
                            color: #FFFFFF;
                            line-height: 64rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .fashu_box {
                            // width: 38rpx;
                            height: 30rpx;
                            position: absolute;
                            font-weight: 600;
                            bottom: 30rpx;
                            font-size: 28rpx;
                            color: #FF9900;
                        }


                    }
                }
            }

            .big_box:nth-child(2) {
                width: 40%;
                // background-color: red;
                justify-content: flex-start;
                align-items: flex-start;
                margin-left: 10rpx;

                .duihuan_box {
                    width: 76%;
                    margin: 0;
                }
            }

            .big_box:nth-child(1) {
                width: 40%;
                display: flex;
                justify-content: flex-end;
                // background-color: #fff;
                align-items: flex-end;
                margin-right: 10rpx;

                .duihuan_box {
                    width: 76%;
                    margin: 0;
                }
            }


        }

        &.len_6 {
            width: 90%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .big_box {
                width: 32%;

                .one_box {
                    width: 200rpx;
                    height: 274rpx;

                    .card__front,
                    .card__back {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                        display: flex;
                        justify-content: center;
                        color: white;
                        border-radius: 20upx;
                    }

                    .card__back {
                        transform: rotateY(180deg);
                        position: relative;

                        .pic_box {
                            width: 180rpx;
                            height: 210rpx;
                            position: absolute;
                            top: 25rpx;

                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .name_box {
                            width: 70%;
                            height: 64rpx;
                            position: absolute;
                            bottom: 74rpx;
                            text-align: center;
                            font-size: 28rpx;
                            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                            font-weight: 500;
                            color: #FFFFFF;
                            line-height: 64rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .fashu_box {
                            // width: 38rpx;
                            height: 30rpx;
                            position: absolute;
                            font-weight: 600;
                            bottom: 30rpx;
                            font-size: 28rpx;
                            color: #FF9900;
                        }


                    }
                }
            }
        }

        &.len_7 {
            width: 90%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .big_box {
                width: 32%;

                .one_box {
                    width: 138rpx;
                    height: 145rpx;

                    .card__front,
                    .card__back {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                        display: flex;
                        justify-content: center;
                        color: white;
                        border-radius: 20upx;
                    }

                    .card__back {
                        transform: rotateY(180deg);
                        position: relative;

                        .pic_box {
                            width: 100rpx;
                            height: 120rpx;
                            position: absolute;
                            top: 6rpx;

                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .name_box {
                            width: 70%;
                            height: 64rpx;
                            position: absolute;
                            bottom: 74rpx;
                            text-align: center;
                            font-size: 28rpx;
                            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                            font-weight: 500;
                            color: #FFFFFF;
                            line-height: 64rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .fashu_box {
                            // width: 38rpx;
                            height: 30rpx;
                            position: absolute;
                            font-weight: 600;
                            bottom: 8rpx;
                            font-size: 28rpx;
                            color: #FF9900;
                        }


                    }
                }
            }
        }

        &.len_8 {
            width: 90%;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;

            .big_box {
                width: 32%;

                .one_box {
                    width: 138rpx;
                    height: 145rpx;

                    .card__front,
                    .card__back {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                        display: flex;
                        justify-content: center;
                        color: white;
                        border-radius: 20upx;
                    }

                    .card__back {
                        transform: rotateY(180deg);
                        position: relative;

                        .pic_box {
                            width: 100rpx;
                            height: 120rpx;
                            position: absolute;
                            top: 6rpx;

                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .name_box {
                            width: 70%;
                            height: 64rpx;
                            position: absolute;
                            bottom: 74rpx;
                            text-align: center;
                            font-size: 28rpx;
                            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                            font-weight: 500;
                            color: #FFFFFF;
                            line-height: 64rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .fashu_box {
                            // width: 38rpx;
                            height: 30rpx;
                            position: absolute;
                            font-weight: 600;
                            bottom: 8rpx;
                            font-size: 28rpx;
                            color: #FF9900;
                        }


                    }
                }
            }
        }

        &.len_9 {
            width: 90%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .big_box {
                width: 32%;

                .one_box {
                    width: 138rpx;
                    height: 145rpx;

                    .card__front,
                    .card__back {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                        display: flex;
                        justify-content: center;
                        color: white;
                        border-radius: 20upx;
                    }

                    .card__back {
                        transform: rotateY(180deg);
                        position: relative;

                        .pic_box {
                            width: 100rpx;
                            height: 120rpx;
                            position: absolute;
                            top: 6rpx;

                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .name_box {
                            width: 70%;
                            height: 64rpx;
                            position: absolute;
                            bottom: 74rpx;
                            text-align: center;
                            font-size: 28rpx;
                            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                            font-weight: 500;
                            color: #FFFFFF;
                            line-height: 64rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .fashu_box {
                            // width: 38rpx;
                            height: 30rpx;
                            position: absolute;
                            font-weight: 600;
                            bottom: 8rpx;
                            font-size: 28rpx;
                            color: #FF9900;
                        }


                    }
                }
            }
        }

        &.len_10 {
            width: 90%;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;

            .big_box {
                width: 25%;

                .one_box {
                    width: 138rpx;
                    height: 145rpx;

                    .card__front,
                    .card__back {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                        display: flex;
                        justify-content: center;
                        color: white;
                        border-radius: 20upx;
                    }

                    .card__back {
                        transform: rotateY(180deg);
                        position: relative;

                        .pic_box {
                            width: 100rpx;
                            height: 120rpx;
                            position: absolute;
                            top: 6rpx;

                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .name_box {
                            width: 70%;
                            height: 64rpx;
                            position: absolute;
                            bottom: 74rpx;
                            text-align: center;
                            font-size: 28rpx;
                            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                            font-weight: 500;
                            color: #FFFFFF;
                            line-height: 64rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }



                        .fashu_box {
                            // width: 38rpx;
                            height: 30rpx;
                            position: absolute;
                            font-weight: 600;
                            bottom: 8rpx;
                            font-size: 28rpx;
                            color: #FF9900;
                        }


                    }
                }

                .up_name_box {
                    width: 158rpx;
                    height: 60rpx;
                    text-align: center;
                    color: #fff;
                    line-height: 60rpx;
                    font-size: 20rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .duihuan_box {
                    width: 98%;
                    height: 54rpx;
                    border-radius: 60rpx;
                    // border: 1rpx solid #FF9F00;
                    // box-shadow: inset 0rpx 0rpx 20rpx 0rpx rgba(255, 159, 0, 0.4);
                    color: #FF9900;
                    text-align: center;
                    line-height: 54rpx;
                    font-size: 19rpx;
                    z-index: 10;
                    margin: auto;
                }
            }
        }

    }

    // 底部
    .floot_box {
        width: 57%;
        height: 108rpx;
        margin: auto;
        color: #FF9900;
        text-align: center;
        line-height: 290rpx;
        font-size: 50rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }
}
</style>